import { defineComponent, h, ref, inject, watch } from 'vue'
import { useTabsStore } from '@/stores/modules/tabs'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { NIcon, NLayout, NLayoutSider, NMenu } from 'naive-ui'
import ipadStyle from './style/ipad.module.scss'

export default defineComponent({
  setup() {
    const isOpen: any = inject('isOpen')
    const $clone = inject('$clone') as <T>(data: T) => T
    const isOpenChange: any = inject('isOpenChange')
    const router: any = useRouter()
    const tabsStore = useTabsStore()
    const { getCurrenName: currentName, getOneMeun: meun } =
      storeToRefs(tabsStore)

    const menuOptions: any = ref([])

    const handSelect = (name: string) => {
      router.push({
        name
      })
    }
    const renderIcon = (icon: string) => {
      return () => {
        return h(NIcon, null, {
          default: () =>
            h('i', {
              class: ['esayIcon', icon]
            })
        })
      }
    }
    const initOptions = () => {
      const arr = $clone(meun.value)
        .filter((el: any) => {
          return !el.meta.isPage
        })
        .map((el: any) => {
          if (el.meta.icon) {
            el.icon = renderIcon(`esayIcon-${el.meta.icon}`)
          }
          if (el.children.length > 0) {
            el.children = getChilder(el.children)
          } else {
            delete el.children
          }
          return el
        })
      menuOptions.value = arr
    }

    const getChilder = (children: any) => {
      return children
        .filter((el: any) => {
          return !el.meta.isPage
        })
        .map((el: any) => {
          if (el.meta.icon) {
            el.icon = renderIcon(`esayIcon-${el.meta.icon}`)
          }
          if (el.children.length > 0) {
            el.children = getChilder(el.children)
          } else {
            delete el.children
          }
          return el
        })
    }
    watch(
      meun.value,
      (val: any) => {
        if (val && val.length > 0) {
          initOptions()
        }
      },
      {
        immediate: true
      }
    )
    return () => (
      <>
        <div class={` ${ipadStyle.ipad}`}>
          <div class='nav-title' onClick={isOpenChange}>
            <img src='https://vitejs.cn/logo.svg' alt='' />
            {isOpen.value && <span>Admin</span>}
          </div>
          <NLayout has-sider class='scroll'>
            <NLayoutSider
              class='sider'
              bordered
              show-trigger
              collapsed={!isOpen.value}
              collapse-mode='width'
              collapsed-width={64}
              width={240}
            >
              <NMenu
                value={currentName.value}
                inverted
                collapsed-width={64}
                collapsed-icon-size={22}
                options={menuOptions.value}
                key-field='name'
                label-field='metaTitle'
                children-field='children'
                onUpdateValue={handSelect}
              />
            </NLayoutSider>
          </NLayout>
        </div>
      </>
    )
  }
})
